<template>
  <div class="basic-info-container">
    <h1>欢迎您！{{ username }}，您的角色是 {{ userRole }}</h1>
    <div class="info-grid">
      <div class="form-group">
        <label for="nickname">昵称:</label>
        <input type="text" v-model="nickname" @dblclick="startEdit('nickname')" class="rounded-input" />
      </div>
      <div class="form-group">
        <label for="company">公司:</label>
        <input type="text" v-model="company" @dblclick="startEdit('company')" class="rounded-input" />
      </div>
      <div class="form-group">
        <label for="department">部门:</label>
        <input type="text" v-model="department" @dblclick="startEdit('department')" class="rounded-input" />
      </div>
      <div class="form-group">
        <label for="position">职位:</label>
        <input type="text" v-model="position" @dblclick="startEdit('position')" class="rounded-input" />
      </div>
      <div class="form-group">
        <label for="email">电子邮件:</label>
        <input type="email" v-model="email" @dblclick="startEdit('email')" class="rounded-input2" />
      </div>
      <div class="form-group">
        <label for="phone">电话号码:</label>
        <input type="tel" v-model="phone" @dblclick="startEdit('phone')" class="rounded-input2" />
      </div>
    </div>
    <button @click="confirmSave" class="save-button">保存修改</button>
    <confirmation-dialog
      v-if="showConfirmationDialog"
      @confirm="saveInfo"
      @cancel="cancelSave"
    />
  </div>
</template>

<script>
import ConfirmationDialog from '../components/ConfirmationDialog2.vue'; // 确认对话框组件
import axios from 'axios';

export default {
  components: {
    ConfirmationDialog,
  },
  data() {
    return {
      username: localStorage.getItem('username'), // 从 localStorage 获取用户名
      userRole: localStorage.getItem('userRole'), // 从 localStorage 获取用户角色
      nickname: '',
      company: '',
      department: '',
      position: '',
      email: '',
      phone: '',
      infoId: null, // 用户信息 ID
      showConfirmationDialog: false, // 确认对话框状态
    };
  },
  created() {
    this.fetchUserInfo(); // 在组件创建时获取用户信息
  },
  methods: {
    async fetchUserInfo() {
      // 根据角色选择 API 端点
      const endpoint = this.userRole === 'admin' 
        ? `http://localhost:3000/api/admin_info/selfadminget`  // 管理员获取自己的信息
        : `http://localhost:3000/api/user_info/selfuserget`;    // 普通用户获取自己的信息

      try {
        const response = await axios.get(endpoint,{
          headers: {
                'username': this.username // 将用户名添加到请求头
            }
        });
        const data = response.data;
        console.log('获取到的用户信息:', data); // 添加调试输出

        // 返回的数据是一个对象
        if (data && Object.keys(data).length > 0) {
          this.infoId = data.info_id || data.admin_id; // 获取用户信息 ID
          this.nickname = data.nickname || ''; // 如果为 null，则设置为空字符串
          this.company = data.company || '';
          this.department = data.department || '';
          this.position = data.position || '';
          this.email = data.email || '';
          this.phone = data.phone || '';
        } else {
          console.error('未找到用户信息');
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },
    confirmSave() {
      this.showConfirmationDialog = true; // 显示确认对话框
    },
    cancelSave() {
      this.showConfirmationDialog = false; // 关闭确认对话框
    },
    async saveInfo() {
      if (!this.infoId) {
        console.error('用户信息 ID 为空，无法保存修改');
        return; // 退出方法
      }

      // 根据角色选择更新的 API 端点
      const endpoint = this.userRole === 'admin' 
        ? `http://localhost:3000/api/admin_info/selfadminupdate`  // 管理员更新自己的信息
        : `http://localhost:3000/api/user_info/selfuserupdate`;    // 普通用户更新自己的信息

      const payload = {
        nickname: this.nickname || null,
        company: this.company || null,
        department: this.department || null,
        position: this.position || null,
        email: this.email || null,
        phone: this.phone || null,
      };

      console.log('发送的更新数据:', payload); // 打印请求数据

      try {
        const response = await axios.put(endpoint, payload,{
          headers: {
                'username': this.username // 将用户名添加到请求头
            }
        });

        if (response.status === 200) {
          console.log('后端响应:', response.data); // 打印响应数据
          await this.fetchUserInfo(); // 更新成功后重新获取用户信息
          this.showConfirmationDialog = false; // 关闭确认对话框
        } else {
          throw new Error('更新失败');
        }
      } catch (error) {
        console.error('更新失败:', error);
      }
    },

    startEdit(field) {
      // 处理编辑状态
      console.log(`开始编辑字段: ${field}`);
    },
  },
};
</script>


<style scoped>
.basic-info-container {
  background-color: white; /* 白色背景 */
  border-radius: 10px; /* 圆角 */
  padding: 20px; /* 内边距 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  padding: 20px;
  height: 450px;
}

.info-grid {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  gap: 15px; /* 每个表单组之间的间距 */
}

.form-group {
  display: flex;
  justify-content: flex-start; /* 标签和输入框对齐方式 */
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 标签和输入框之间的间隔 */
}

label {
  white-space: nowrap; /* 防止标签换行 */
}

/* 输入框样式 */
.rounded-input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px; /* 添加圆角 */
  margin-left: 180px;
  width: 200px; 
  transition: border-color 0.3s; /* 添加悬停效果 */
}
.rounded-input2 {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px; /* 添加圆角 */
  margin-left: 150px;
  width: 200px; 
  transition: border-color 0.3s; /* 添加悬停效果 */
}

.rounded-input:hover {
  border-color: #007bff; /* 悬停时边框颜色 */
}

/* 保存按钮样式 */
.save-button {
  margin-top: 20px; /* 按钮与表单之间的间距 */
  padding: 10px 20px; /* 内边距 */
  background-color: #007bff; /* 蓝色背景 */
  color: white; /* 白色文字 */
  border: none;
  border-radius: 4px; /* 添加圆角 */
  cursor: pointer;
  width: 200px; /* 减小按钮宽度 */
  display: block; /* 确保按钮占满整个容器 */
  margin: 20px auto; /* 居中显示 */
}

.save-button:hover {
  background-color: #0056b3; /* 悬停时深蓝色背景 */
}
</style>